<template>
  <div id="app-hardware-file">
    <div class="one-block-1">
      <h3 class="title">智能场控</h3>
    </div>
    <div class="one-block-2">
      <a-space style="margin-bottom: 10px; position: relative">
        <a-select
          v-model="selectCK"
          :style="{ width: '89px' }"
          placeholder="场控"
          :trigger-props="{ autoFitPopupMinWidth: true }"
        >
          <a-option v-for="ck in ckOptions" :key="ck.ckId" :value="ck.ckId">{{
            ck.ckName
          }}</a-option>
          <!-- <a-option>场控</a-option> -->
        </a-select>
        <b style="font-size: 16px; position: relative; top: 24px"
          >回复<br />内容</b
        >
        <a-input
          v-model="replayContent"
          type="textarea"
          :style="{
            width: '450px',
            height: '88px',
            position: 'absolute',
            top: '0px',
          }"
          placeholder=""
          allow-clear
        />
        <a-input
          :style="{ width: '454px', visibility: 'hidden' }"
          placeholder=""
          allow-clear
        />
        <a-button type="primary" @click="handleAdd">新增</a-button>
        <a-button type="primary" status="danger" @click="handleRemove"
          >删除</a-button
        >
      </a-space>
    </div>
    <div class="one-block-2">
      <a-space>
        <a-button type="primary">修改备注</a-button>
        <b style="visibility: hidden">回复内容</b>
        <a-input
          :style="{ width: '440px', visibility: 'hidden' }"
          placeholder=""
          allow-clear
        />
        <a-button type="primary" @click="handleEdit">修改</a-button>
        <a-button type="primary" status="danger" @click="handleRemove"
          >全删</a-button
        >
      </a-space>
    </div>
    <div class="table-wrapper">
      <a-table
        :data="tabList"
        :columns="columns"
        :bordered="{ wrapper: true, cell: true }"
        row-key="ckxxId"
        v-model:selectedKeys="selectedIds"
        @row-click="rowClick"
        :pagination="false"
      >
      </a-table>
    </div>
  </div>
</template>
<script>
import { ipcApiRoute } from '@/utils/ipcMainApi'
import { ipc } from '@/utils/ipcRenderer'
import storage from 'store2'
import {
  getCKData,
  getCKList,
  updateCKData,
  removeCKData,
  addCKData,
} from '@/services/ck'
export default {
  data() {
    return {
      selectCK: '',
      selectedIds: [],
      selectedRow: {},
      ckOptions: [],
      replayContent: '',
      columns: [
        {
          title: '序',
          dataIndex: 'ckxxId',
          align: 'center',
          width: 50,
        },

        {
          title: '回复内容',
          dataIndex: 'ckxxReply',
        },
      ],
      tabList: [
        {
          key: '1',
          1: '1',
          2: '拍了-已拍',
        },
        {
          key: '2',
          1: '2',
          2: '怎么拍-怎么买',
        },
      ],
    }
  },
  mounted() {
    this.initData()
    this.getCKOptions()
  },
  methods: {
    async initData(type) {
      try {
        const res = await getCKData()
        console.log(res)
        this.tabList = res.rows
        this.selectedRow = this.tabList.length ? this.tabList[0] : {}
        if (res && res.rows && res.rows.length) {
          if (!type) {
            if (this.selectedIds.length) {
              this.selectedIds = []
            }
            this.selectedIds.push(res.rows[0].ckxxId)
            this.selectCK = res.rows[0].ckId
            this.replayContent = res.rows[0].ckxxReply
          } else if (type === 2) {
            if (this.selectedIds.length) {
              this.selectedIds = []
            }
            const len = this.tabList.length - 1
            this.selectedIds.push(res.rows[len].ckxxId)
            this.selectCK = res.rows[len].ckId
            this.replayContent = res.rows[len].ckxxReply
          }
        }
      } catch (error) {
        this.$message.error(error)
      }
    },
    async getCKOptions() {
      try {
        const res = await getCKList()
        this.ckOptions = res.rows
      } catch (error) {
        this.$message.error(error)
      }
    },
    rowClick(row, e) {
      // console.log(row)
      const idx = this.selectedIds.findIndex((item) => row.dyuserId === item)
      if (idx > -1) {
      } else if (this.selectedIds.length) {
        this.selectedIds.splice(0, this.selectedIds.length)
        this.selectedIds.push(row.ckxxId)
        this.selectedRow = row
        this.selectCK = row.ckId
        this.replayContent = row.ckxxReply
      } else {
        this.selectedIds.push(row.ckxxId)
        this.selectedRow = row
        this.selectCK = row.ckId
        this.replayContent = row.ckxxReply
      }
      console.log(this.selectedIds)
    },
    async handleAdd() {
      try {
        const res = await addCKData({
          ckId: this.selectCK,
          // ckxxId: this.selectedIds[0],
          ckxxReply: this.replayContent,
        })
        this.initData(2)
      } catch (error) {
        this.$message.error(error)
      }
    },
    async handleEdit() {
      try {
        const res = await updateCKData({
          ckId: this.selectCK,
          ckxxId: this.selectedIds[0],
          ckxxReply: this.replayContent,
        })
        this.initData(1)
      } catch (error) {
        this.$message.error(error)
      }
    },
    async handleRemove() {
      try {
        const res = await removeCKData({
          id: this.selectedIds[0],
        })
        this.initData()
      } catch (error) {
        this.$message.error(error)
      }
    },
  },
}
</script>
<style lang="less" scoped>
#app-hardware-file {
  padding: 0px 10px;
  text-align: left;
  width: 100%;
  .one-block-1 {
    font-size: 16px;
    padding-top: 10px;
  }
  .one-block-2 {
    padding-top: 10px;
  }
  .table-wrapper {
    margin-top: 20px;
    padding-right: 20px;
  }
  :deep(.arco-table-th) {
    background: rgb(var(--arcoblue-6));
  }
}
</style>
